import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Typography, Spin, Progress } from 'antd';
import { 
  ClockCircleOutlined, 
  BookOutlined, 
  TrophyOutlined,
  FireOutlined,
  AimOutlined,
  CheckCircleOutlined
} from '@ant-design/icons';
import { statisticsService } from '../services/api';

const { Title, Text } = Typography;

interface QuickStats {
  today: {
    focus_sessions: number;
    focus_duration: number;
    tasks_completed: number;
    points_earned: number;
  };
  week: {
    week_focus_sessions: number;
    week_focus_duration: number;
    week_tasks_completed: number;
    week_points_earned: number;
  };
  month: {
    month_focus_sessions: number;
    month_focus_duration: number;
    month_tasks_completed: number;
    month_points_earned: number;
  };
  streak_days: number;
  total_points: number;
}

const QuickStatsSection: React.FC = () => {
  const [stats, setStats] = useState<QuickStats | null>(null);
  const [loading, setLoading] = useState(false);

  const loadStats = async () => {
    setLoading(true);
    try {
      const response = await statisticsService.getTodayStats();
      if ((response as any).success) {
        setStats((response as any).data);
      }
    } catch (error) {
      console.error('加载统计数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadStats();
  }, []);

  const formatDuration = (minutes: number) => {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours > 0) {
      return `${hours}h${mins}m`;
    }
    return `${mins}m`;
  };

  const getStreakColor = (days: number) => {
    if (days >= 30) return '#f50';
    if (days >= 7) return '#fa8c16';
    if (days >= 3) return '#52c41a';
    return '#1890ff';
  };

  if (loading) {
    return (
      <Card>
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Spin size="large" />
        </div>
      </Card>
    );
  }

  if (!stats) {
    return (
      <Card>
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Text type="secondary">暂无统计数据</Text>
        </div>
      </Card>
    );
  }

  return (
    <Card title="学习概览" extra={<TrophyOutlined />}>
      <Row gutter={[16, 16]}>
        <Col xs={12} sm={6}>
          <Statistic
            title="今日专注"
            value={stats.today.focus_sessions}
            suffix="次"
            prefix={<AimOutlined />}
            valueStyle={{ color: '#1890ff' }}
          />
        </Col>
        <Col xs={12} sm={6}>
          <Statistic
            title="今日时长"
            value={formatDuration(stats.today.focus_duration)}
            prefix={<ClockCircleOutlined />}
            valueStyle={{ color: '#52c41a' }}
          />
        </Col>
        <Col xs={12} sm={6}>
          <Statistic
            title="连续学习"
            value={stats.streak_days}
            suffix="天"
            prefix={<FireOutlined />}
            valueStyle={{ color: getStreakColor(stats.streak_days) }}
          />
        </Col>
        <Col xs={12} sm={6}>
          <Statistic
            title="总积分"
            value={stats.total_points}
            prefix={<TrophyOutlined />}
            valueStyle={{ color: '#faad14' }}
          />
        </Col>
      </Row>

      <div style={{ marginTop: '16px' }}>
        <Title level={5} style={{ marginBottom: '12px' }}>本周进度</Title>
        <Row gutter={[16, 8]}>
          <Col xs={24} sm={8}>
            <div style={{ marginBottom: '8px' }}>
              <Text style={{ fontSize: '12px' }}>专注会话</Text>
              <Progress 
                percent={Math.round(Math.min((stats.week.week_focus_sessions / 20) * 100, 100))} 
                size="small" 
                strokeColor="#1890ff"
              />
            </div>
          </Col>
          <Col xs={24} sm={8}>
            <div style={{ marginBottom: '8px' }}>
              <Text style={{ fontSize: '12px' }}>学习时长</Text>
              <Progress 
                percent={Math.round(Math.min((stats.week.week_focus_duration / 1200) * 100, 100))} 
                size="small" 
                strokeColor="#52c41a"
              />
            </div>
          </Col>
          <Col xs={24} sm={8}>
            <div style={{ marginBottom: '8px' }}>
              <Text style={{ fontSize: '12px' }}>完成任务</Text>
              <Progress 
                percent={Math.round(Math.min((stats.week.week_tasks_completed / 50) * 100, 100))} 
                size="small" 
                strokeColor="#722ed1"
              />
            </div>
          </Col>
        </Row>
      </div>
    </Card>
  );
};

export default QuickStatsSection;
